<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/lib/jquery.min.js"></script>
    <script src="../static/lib/echarts.min.js"></script>
    <script src="../static/lib/react.production.min.js"></script>
    <script src="../static/lib/react-dom.production.min.js"></script>
    <script src="../static/lib/lodash.min.js"></script>
    <script src="../static/lib/plots.min.js"></script>
    <script src="../static/lib/babel.min.js"></script>
    <title>Title</title>
    <style>
        #app {
            width: 100vw;
            height: 100vh;
            background: linear-gradient(to bottom, #272e64, #000000);
            position: relative;
            background-blend-mode: color-burn;
        }

        #app:before {
            content: '';
            position: absolute;
            background-image: url("../static/data/ether.jpg");
            top: 25vh;
            left: calc(50% - 25vh);
            width: 50vh;
            height: 50vh;
            background-size: cover;
            box-shadow: 0 0 100px 50px #000000,
            0 0 100px 50px #000000 inset;
        }

        body {
            margin: 0;
        }

        .divider {
            border-top: 1px solid #ffffff;
        }
    </style>
</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    // 引入ReactDOM中的createRoot函数
    const {createRoot} = ReactDOM
    // 引入Plots中的Line、Column、Area、Pie、WordCloud、Scatter组件
    const {Line, Column, Area, Pie, WordCloud, Scatter} = Plots
    // 引入React中的useRef、useState、useEffect函数
    const {useRef, useState, useEffect} = React
    const Layout = () => {
        const containerStyle = {
            width: '100vw',
            height: '100vh',
            display: 'flex',
            flexDirection: 'column',
        }
        const columnStyle = {
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            border: '2px solid #2d5fb2',
            margin: '10px',
            padding: '10px'
        }
        const rowStyle = {
            flex: 12,
            display: 'flex',
            flexDirection: 'row',
        }
        const titleStyle = {
            flex: 2,
            fontSize: '28px',
            color: '#ffffff',
            fontWeight: 'bold',
            display: 'flex',
            justifyContent: 'center'
        }
        const chartStyle = {
            flex: 1,
            width: "100%",
            height: "100%"
        }
        const title = '动漫数据可视化大屏'
        return (
            <div style={containerStyle}>
                <div style={titleStyle}>{title}</div>
                <div style={rowStyle}>
                    <div style={columnStyle}>
                        <div style={chartStyle}>
                            <MyScatter/>
                        </div>
                    </div>
                    <div style={columnStyle}>
                        <div style={chartStyle}>
                            <Table/>
                        </div>
                        <div style={chartStyle}>
                            <WordCount/>
                        </div>
                    </div>
                    <div style={columnStyle}>
                        <div style={chartStyle}>
                            <MyArea/>
                        </div>
                        <div className="divider" style={chartStyle}>
                            <Bar/>
                        </div>
                        <div className="divider" style={chartStyle}>
                            <StatusPie/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    const Table = () => {
        const [name, setName] = useState([])
        const [value, setValue] = useState([])
        useEffect(() => {
            $.get("http://127.0.0.1:5000/table")
                .then(response => {
                    setName(response.name);
                    setValue(response.value);
                    setInterval(() => {
                        const table = document.querySelector('.table');
                        if (table) {
                            console.log(table.style.top)
                            table.style.top = (parseInt(table.style.top) - 29) + 'px';
                        }
                        if (parseInt(table.style.top) === response.name.length * -29) {
                            table.style.top = '29px';
                        }
                    }, 3000)
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        }, [])
        const rowStyle = {
            display: 'flex',
            flexDirection: 'row',
        }
        const oddRowStyle = {
            ...rowStyle,
            backgroundColor: '#093067'
        }
        const evenRowStyle = {
            ...rowStyle,
            backgroundColor: '#0f4ea2'
        }
        const titleRowStyle = {
            ...rowStyle,
            backgroundColor: '#70c2ec',
            zIndex: 999
        }
        const columnStyle = {
            display: 'flex',
            flexDirection: 'column',
            color: '#ffffff',
            top: '29px',
            position: 'absolute',
            left: 0,
            width: '100%',
            transition: '1s',
        }
        const tableStyle = {
            width: '100%',
            height: '348px',
            display: 'flex',
            flexDirection: 'column',
            overflow: 'hidden',
            position: 'relative',
            opacity: 0.8
        }
        const collStyle = {
            flex: 5,
            display: 'flex',
            justifyContent: 'center',
            padding: '4px',
        }
        const rankStyle = {
            ...collStyle,
            flex: 1
        }
        return (
            <div style={tableStyle}>
                <div style={titleRowStyle}>
                    <div style={rankStyle}>排名</div>
                    <div style={collStyle}>名称</div>
                    <div style={collStyle}>评分</div>
                </div>
                <div className="table" style={columnStyle}>
                    {
                        name.map((item, index) => {
                                if (index % 2 === 0) {
                                    return (
                                        <div key={index} style={oddRowStyle}>
                                            <div style={rankStyle}>{index + 1}</div>
                                            <div style={collStyle}>{item}</div>
                                            <div style={collStyle}>{value[index]}</div>
                                        </div>
                                    )
                                } else {
                                    return (
                                        <div key={index} style={evenRowStyle}>
                                            <div style={rankStyle}>{index + 1}</div>
                                            <div style={collStyle}>{item}</div>
                                            <div style={collStyle}>{value[index]}</div>
                                        </div>
                                    )
                                }
                            }
                        )
                    }
                </div>
            </div>
        )
    }
    const Bar = () => {
        const [data, setData] = useState([])
        useEffect(() => {
            $.get("http://127.0.0.1:5000/bar")
                .then(response => {
                    setData(response.data);
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        }, [])
        const config = {
            title: {
                title: '动漫类型数量TOP10',
                titleFill: '#ffffff',
            },
            data,
            xField: 'type',
            yField: 'value',
            label: {
                text: (d) => `${d.value}`,
                textBaseline: 'bottom',
            },
            axis: {
                x: {
                    title: '类型',
                    titleFill: '#ffffff',
                    labelFill: '#ffffff',
                },
                y: {
                    title: '数量',
                    titleFill: '#ffffff',
                    labelFill: '#ffffff',
                },
            },
            style: {
                // 圆角样式
                radiusTopLeft: 10,
                radiusTopRight: 10,
            },
        };
        return <Column {...config} />;
    }
    const MyArea = () => {
        const [data, setData] = useState([])
        useEffect(() => {
            $.get("http://127.0.0.1:5000/area")
                .then(response => {
                    setData(response.data);
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        }, [])
        const config = {
            title: {
                title: '各年上映的动漫数量',
                titleFill: '#ffffff',
            },
            data,
            xField: 'year',
            yField: 'value',
            label: {
                fill: '#ffffff',
                connectorStroke: '#ffffff',
                text: 'value',
                style: {
                    fontSize: 10,
                    textAlign: (_, idx, arr) => {
                        if (idx === 0) return 'left';
                        if (idx === arr.length - 1) return 'right';
                        return 'center';
                    },
                },
            },
            style: {
                opacity: 0.4,
            },
            axis: {
                x: {
                    title: '年份',
                    titleFill: '#ffffff',
                    labelFill: '#ffffff'
                },
                y: {
                    title: '数量',
                    titleFill: '#ffffff',
                    labelFill: '#ffffff',
                },
            },
        };
        return <Area {...config} />;
    }
    const StatusPie = () => {
        const [data, setData] = useState([])
        useEffect(() => {
            $.get("http://127.0.0.1:5000/pie_status")
                .then(response => {
                    setData(response.data);
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        }, [])
        const config = {
            title: {
                title: '动漫连载状态占比',
                titleFill: '#ffffff',
            },
            data,
            angleField: 'value',
            colorField: 'type',
            radius: 0.8,
            label: {
                fill: '#ffffff',
                connectorStroke: '#ffffff',
                text: (d) => `${d.type}\n ${d.value}`,
                position: 'spider',
            },
            axis: {
                x: {
                    labelFill: '#ffffff'
                },
                y: {
                    labelFill: '#ffffff'
                },
            },
            legend: {
                color: {
                    itemLabelFill: '#ffffff',
                    title: false,
                    position: 'right',
                    rowPadding: 5,
                },
            },
            tooltip: {
                title: d => d.type,
                items: [{channel: 'y'}],
            }
        };
        return <Pie {...config} />;
    }
    const WordCount = () => {
        const [data, setData] = useState([])
        useEffect(() => {
            $.get("http://127.0.0.1:5000/word_count")
                .then(response => {
                    setData(response.data);
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        }, [])
        const config = {
                title: {
                    title: '动漫类型数量词云图',
                    titleFill: '#ffffff'
                },
                data,
                colorField: 'name',
                textField:
                    'name',
                legend:
                    false,
            }
        ;
        return <WordCloud {...config} />;
    }
    const MyScatter = () => {
        const [data, setData] = useState([])
        useEffect(() => {
            $.get("http://127.0.0.1:5000/scatter")
                .then(response => {
                    setData(response.data);
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        }, [])
        const config = {
            title: {
                title: '动漫不同类型各评分数量气泡图',
                titleFill: '#ffffff'
            },
            data,
            xField: 'rating',
            yField: 'type',
            sizeField: 'value',
            colorField: 'type',
            shapeField: 'point',
            scale: {
                size: {
                    rangeMax: 30,
                    rangeMin: 4,
                },
            },
            axis: {
                x: {
                    title: '评分',
                    titleFill: '#ffffff',
                    labelFill: '#ffffff',
                    tickStroke: '#ffffff',
                },
                y: {
                    title: '类型',
                    titleFill: '#ffffff',
                    labelFontSize: 10,
                    labelFill: '#ffffff',
                    tickStroke: '#ffffff',
                },
            },
            legend: false,
            style: {
                stroke: 'black',
                opacity: 0.8,
                lineWidth: 1,
            },
        };
        return <Scatter {...config} />;
    }
    const root = createRoot(document.getElementById('app'))
    root.render(<Layout/>)

</script>
</body>
</html>